<template>
  <div class="app-container">
    <div class="oppinion" v-if="form.approveStatus <0">
      <div class="oppinion-title">驳回原因：</div>
      <div class="oppinion-info">{{ form.apprOppinion }}</div>
    </div>
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">任务信息</span>
    </div>
    <el-form ref="tempForm" :model="tempForm" v-loading="formLoading" label-width="140px"
             style="margin-left: 25%;">
      <el-row>
        <el-col :span="16">
          <el-form-item label="任务标题" prop="title">
            <el-input v-model="tempForm.title" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="任务内容" prop="contents">
            <editor ref="editor" v-model="tempForm.contents" :readOnly="true" :min-height="192" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="附件" prop="attachFile">
            <file-upload v-model="tempForm.attachFile" :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex;flex-flow: row nowrap;margin-left: 9%">
      <div style="border:1px;background-color: #4e8dff; width: 6px;height: 20px"></div>
      <span style="margin-left: 10px">任务考评</span>
    </div>
    <el-form ref="form" :model="form" label-width="140px"
             style="margin-left: 25%;">
      <!--      考核人选择组件-->
      <draggable ref="draggableRef" :isAdd="false" :examineId="id" :isSubmitted="true" :examineType="1" :isReject="approveStatus"></draggable>
    </el-form>
    <approve-select-form ref="approveSelectFormRef" :resultApproveIds="form.resultApproveIdsList"
                         :resultCheckIds="form.resultCheckIdsList" :endApproveId="form.endApproveId"></approve-select-form>
    <appr-records ref="apprRecordsRef" :examineId="id" :opreationType="2" ></appr-records>
    <div style="margin: 2% auto auto 40%;">
      <el-button class="form_button_item" @click="closeBtnHandler">取消</el-button>
      <el-button class="form_button_item" :loading="saveBtnLoading" type="primary" @click="submitForm">提交考评</el-button>
    </div>
  </div>
</template>

<script>
  import {getTask, evaluateSubmit} from "@/api/examine/task/api";
  import approveSelectForm from "@/views/examine/approveSelectForm";
  import apprRecords from "@/views/examine/apprRecords";
  import draggable from "@/views/system/user/draggable";

  export default {
    name: "Add",
    components: {
      approveSelectForm,
      apprRecords,
      draggable
    },
    data() {
      return {
        datePickerValid: {
          disabledDate(time) {
            return time.getTime() <= new Date().getTime() - 8.64e7;
          }
        },
        approveStatus:0,
        formLoading: false,
        title: "",
        cycleVal: '',
        deptName: '',
        isUpdate: false,
        rulesData: {},
        receiveData: {},
        saveBtnLoading: false,
        // 表单参数
        tempForm: {},
        form: {},
        id: ''
      }
    },
    created() {
      this.initPage();
      this.$nextTick(()=>{
        this.$refs.editor.hideToolbar();
      })
    },
    methods: {
      initPage() {
        this.reset()
        this.id = this.$route.query.id;
        if (this.id) {
          this.isUpdate = true;
          this.formLoading = true;
          getTask(this.id).then(resp => {
            this.tempForm = resp.data
            this.form = resp.data
            this.approveStatus=resp.data.approveStatus
          }).finally(() => {
            this.formLoading = false;
          })
        }
      },
      submitForm() {
        Promise.all([this.$refs.approveSelectFormRef.getCommonForm(), this.$refs["form"].validate()]).then(resp => {
          this.saveBtnLoading = true;
          Object.assign(this.form, resp[0])
          var dragArr = this.$refs.draggableRef.submitData();
          if (dragArr) {
            if (dragArr.excellentArray) {
              this.form.excellentPersonIds = dragArr.excellentArray.map(m => m.userId)
            }
            if (dragArr.goodArray) {
              this.form.goodPersonIds = dragArr.goodArray.map(m => m.userId)
            }
            if (dragArr.qualifiedArray) {
              this.form.qualifiedPersonIds = dragArr.qualifiedArray.map(m => m.userId)
            }
            if (dragArr.unqualifiedArray) {
              this.form.unqualifiedPersonIds = dragArr.unqualifiedArray.map(m => m.userId)
            }
            if (dragArr.almostArray) {
              this.form.almostPersonIds = dragArr.almostArray.map(m => m.userId)
            }
          }
          if (this.form.id != null) {
            evaluateSubmit(this.form).then(response => {
              this.$modal.msgSuccess("提交成功");
              // 清空页签缓存
              this.$tab.clearKeepAlivePage('EvaluateTable')
              this.closeBtnHandler();
            }).finally(() => {
              this.saveBtnLoading = false;
            })
          }
        });
      },
      closeBtnHandler() {
        this.reset()
        // 关闭当前页面
        this.$tab.closeOpenPage();
        // 刷新列表页面
        this.$tab.refreshPage({path: "/task/evaluateTable"});
      },
      // 表单重置
      reset() {
        this.form = {
          missionDescribe: undefined,
          attachFile: undefined,
          isSubmitted: undefined,
          isReceived: undefined,
          status: undefined
        };
        this.resetForm("form");
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    color: #606266;
  }

  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff;
    color: #606266;
  }

  ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
    background-color: #fff;
    color: #606266;
  }

  .oppinion {
    padding: 10px 15px;
    position: relative;
    left: 10%;
    top: 0px;
    margin-bottom: 2%;
    width: 1162px;
    height: auto;
    background: inherit;
    background-color: inherit;
    background-color: rgba(255, 169, 0, 1);
    border: none;
    border-radius: 2px;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-style: normal;
    text-align: left;
    &-title{
      font-weight: bold;
      font-size: 16px
    }
    &-info{
      padding: 5px 10px 0px 68px;
      line-height: 1.5;
    }
  }
</style>
